import React from "react";
import { useClickAway } from "@uidotdev/usehooks";

const Demo5 = () => {
  const [isOpen, setIsOpen] = React.useState(false);
  const ref = useClickAway(() => {
    setIsOpen(false);
  });

  const handleOpenModal = () => {
    if (isOpen === false) {
      setIsOpen(true);
    }
  };
  return (
    <div className="ProviderContainer BrownBorder">
      <section>
        <h1>useClickAway</h1>
        <button className="link" onClick={handleOpenModal}>
          Open Modal
        </button>
        {isOpen && (
          <dialog ref={ref}>
            <button onClick={() => setIsOpen(false)}>X</button>
            <h2>Modal</h2>
            <p>
              Click outside the modal to close (or use the button) whatever you
              prefer.
            </p>
          </dialog>
        )}
      </section>
    </div>
  );
};

export default Demo5;
